<template>
    <div class="login-page">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="login-title">大屏可视化</span>
        </div>
        <div class="login-form">
          <el-form :model="form" :rules="loginRules" ref="loginForm" >
            <el-form-item prop="userName">
              <el-input type="text" v-model="form.userName" auto-complete="off" placeholder="请输入用户名">
                <template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input type="password" v-model="form.passWord" auto-complete="off" placeholder="请输入密码">
                <template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn"  type="primary" @click="handleLogin">登录</el-button>
              <el-button  type="primary" >注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </template>

<script>
import { dashboardLogin } from '../api/Login';
import storage from '../model/Storage'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data () {
    return {
      loading: false,
      form: {
        userName: '',
        passWord: ''
      },
      response: {
        token: '',
        msg: '',
        code: 0
      },
      loginRules: {
        userName: [
          { required: true, message: '请输入账户', trigger: 'blur' }
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleLogin () {
      this.$refs.loginForm.validate().then(() => {
        this.loading = true;
        dashboardLogin(this.form.userName, this.form.passWord).then((res) => {
          console.log(res);
          this.response = res;
          if (this.response.code === 200) {
            // store.commit('setToken', this.response.token);
            // store.commit('setUserInfo', this.form.userName);
            storage.set('token', this.response.data.token)
            storage.set('userName', this.form.userName)
            this.$router.push({ path: '/about' }).catch(() => console.log());
          } else if (this.response.code === 202) {
            this.response = res;
            this.loading = false;
            this.$message({
              message: this.response.msg,
              type: 'warning'
            });
          } else {
            this.loading = false;
            this.$message({
              message: '用户名或密码错误！',
              type: 'warning'
            });
          }
        })
      }).catch(() => {
        this.$message({
          message: '输入错误！',
          type: 'warning'
        });
      })
    }
  }
}
</script>

  <style scoped>
  .login-page{
    /* background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%); */
    background:url('../assets/img/pageBg.png') no-repeat fixed center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login-title{
    font-size: 20px;
    margin-left: 100px;
  }

  .box-card {
    width: 375px;
    background-color: rgba(255, 255, 255, 0.5);
  }
.login-btn{
    margin-left: 210px;
}
  </style>
